<template>
	<view style="display: flex;">
		<!-- 滚动竖向滚动 需要设置高度 高度是设备动态获取 -->
		<scroll-view
			scroll-y
			style="width: 30%;"
			:style="{ height: windowHeight + 'px' }"
			v-if="heroList"
		>
			<view
				class="item"
				:class="{ cur: current == index }"
				v-for="(item, index) in heroList"
				:key="index"
				@click="doCheck(index)"
			>
				{{ item.title }}
			</view>
		</scroll-view>
		<!-- 右侧 -->
		<scroll-view
			scroll-y
			style="width: 70%;"
			:style="{ height: windowHeight + 'px' }"
			v-if="heroInfo"
		>
			<!-- 简介 -->
			<view style="display: flex;padding: 30rpx;">
				<image
					:src="
						`https://game.gtimg.cn/images/lol/act/img/champion/${
							heroInfo.hero.alias
						}.png`
					"
					style="width: 180rpx;height: 180rpx;flex:none"
				></image>
				<view
					style="display: flex;flex-direction: column;padding-left: 30rpx;background-color: #EEEEEE;width: 100%;"
				>
					<!-- 名称 -->
					<view style="font-size: 1.2em;font-weight: bold;">
						{{ heroInfo.hero.title }}
					</view>
					<!-- 昵称 -->
					<view>昵称:{{ heroInfo.hero.name }}</view>
					<!-- 金币 -->
					<view>金币:{{ heroInfo.hero.goldPrice }}</view>
					<!-- 点券 -->
					<view>点券:{{ heroInfo.hero.couponPrice }}</view>
				</view>
			</view>
			<!-- 背景故事 -->
			<uni-card title="背景故事">
				<view>{{ heroInfo.hero.shortBio }}</view>
			</uni-card>
			<!-- 使用建议 -->
			<uni-collapse>
				<uni-collapse-item title="使用建议">
					<uni-list>
						<uni-list-item
							v-for="(item, index) in heroInfo.hero.allytips"
							:title="item"
							:key="index"
						></uni-list-item>
					</uni-list>
				</uni-collapse-item>
			</uni-collapse>
			<!-- 对战技巧 -->
			<uni-collapse>
				<uni-collapse-item title="对战技巧">
					<uni-list>
						<uni-list-item
							v-for="(item, index) in heroInfo.hero.enemytips"
							:title="item"
							:key="index"
						></uni-list-item>
					</uni-list>
				</uni-collapse-item>
			</uni-collapse>
			<!-- 技能说明 -->
			<uni-collapse>
				<uni-collapse-item title="技能说明">
					<uni-list>
						<uni-list-item
							v-for="(item, index) in heroInfo.spells"
							:key="index"
							:title="item.name"
							:thumb="item.abilityIconPath"
							thumbSize="lg"
							:note="item.description"
							direction="column"
						></uni-list-item>
					</uni-list>
				</uni-collapse-item>
			</uni-collapse>
			<!-- 皮肤 -->
			<uni-collapse>
				<uni-collapse-item title="皮肤">
					<uni-grid
						:column="3"
						:showBorder="false"
						:highlight="false"
					>
						<uni-grid-item
							v-for="(item, index) in heroInfo.skins"
							:key="index"
						>
							<image
								:src="item.iconImg"
								style="width: 150rpx;height: 150rpx;border-radius: 6rpx;"
							></image>
						</uni-grid-item>
					</uni-grid>
				</uni-collapse-item>
			</uni-collapse>
		</scroll-view>
	</view>
</template>

<script>
export default {
	// 发请求  拿数据  存本地  做展示
	data() {
		return {
			heroList: null,
			current: 0,
			heroInfo: null
		};
	},
	mounted() {
		this.getHeroList();
	},
	methods: {
		// 切换菜单
		doCheck(index) {
			this.current = index;
			// 切换菜单之后加载右侧详情信息
			this.getHeroInfo(index);
		},
		// 获取英雄信息
		getHeroInfo(index) {
			const heroId = this.heroList[index].heroId;
			const url = `http://api.jiasiyuan.cn/images/lol/act/img/js/hero/${heroId}.js`;
			// console.log(url);
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					// console.log(res);
					this.heroInfo = res.data;
					// 打印查看技能信息
					// console.log(this.heroInfo.spells)
				},
				fail: () => {},
				complete: () => {}
			});
		},
		// 获取英雄列表
		getHeroList() {
			// 接口数据请求不到，网络问题，可以换域名http://api.jiasiyuan.cn
			const url =
				'http://api.jiasiyuan.cn/images/lol/act/img/js/heroList/hero_list.js?v=50';
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.heroList = res.data.hero;
					// 默认加载第一个英雄的数据
					this.getHeroInfo(0);
				},
				fail: () => {},
				complete: () => {}
			});
		}
	},
	computed: {
		windowHeight() {
			// 动态同步获取设备窗口的高度
			return uni.getSystemInfoSync().windowHeight;
		}
	}
};
</script>

<style scoped lang="scss">
.item {
	padding: 10px;
	text-align: center;
	border-bottom: 1px solid #d3d3d3;
	&.cur {
		background-color: #c0c4cc;
		color: #007aff;
		font-weight: bold;
	}
}
</style>
